<template>
  <view class="order_confirmation">
    <z-nav-bar id="nav" bgColor="#ffffff" title="确认下单"></z-nav-bar>
    <public-loading></public-loading>
    <up-sticky :offset-top="top" >
      <view class="tab-container">
        <template v-if="!deviceCode">
          <view class="tab-item " :class="{active: typeOder === 1}" @click="handeType(1)">
            <text>预约上门</text>
            <view class="line_active" v-show="typeOder === 1"></view>
          </view>
          <view class="tab-item"  :class="{active: typeOder === 2}" @click="handeType(2)">
            <text>物流到店</text>
            <view class="line_active" v-show="typeOder === 2"></view>
          </view>
        </template>
        <template v-else>
            <view class="tab-item" :class="{active: typeOder === 3}" @click="handeType(3)">
              <text>衣柜到店</text>
              <view class="line_active" v-show="typeOder === 3"></view>
            </view>
        </template>


      </view>
    </up-sticky>

    <view class="rail-container mgt-24">
      <view class="custom flex-center-start" v-if="!deviceCode">
        <view class="state">
          洗
        </view>
        <view class="contact">
          <template v-if="!formData.userAddress">
            <view class="bold" @click="goChooseAddress">请选择上门地址</view>
          </template>
          <template v-else>
            <view class="bold">{{ShopStore.addressInfo.recipientName}} <text>{{ShopStore.addressInfo.recipientPhone}}</text></view>
            <view class="add">
              {{ShopStore.addressInfo.recipientAddress}}
            </view>
          </template>

        </view>
        <view class="line-pic flex-aj-center">
          <image src="http://www.xvopen.com/xiaoV/img1/purchaser.png" mode="" @click="goChooseAddress"></image>
        </view>
      </view>
<!--      订单的类型-->
      <template v-if="typeOder===1">
        <view class="rail-item item-top-border">
          <text >上门时间</text>
          <view class="state-grey flex-aj-center flex1" @tap="showDoor=true">
            <input disabled="true"  v-model="formData.serviceTime"  placeholder="选择时间" style="text-align: right;font-size:28rpx;flex:1" placeholder-style="color:#999"/>
            <view class="back">
              <back :isRight="true" :borderColor="'#999'" :padding="'4rpx 0 0'"></back>
            </view>
          </view>
        </view>
      </template>
      <template v-if="typeOder===2">
        <view class="rail-item item-top-border">
          <text>物流信息</text>
          <view class="state-grey flex-aj-center" @tap="logisticsShow=true">

            <input disabled="true" v-model="formData.shippingLogistics"  placeholder="选择物流" style="text-align: right;font-size:28rpx;" placeholder-style="color:#999"/>
            <view class="back">
              <back :isRight="true" :borderColor="'#999'" :padding="'4rpx 0 0'"></back>
            </view>
          </view>
        </view>
        <view class="rail-item item-top-border">
          <text>寄件单号</text>
          <view class="state-grey flex-aj-center" >
            <input  placeholder="请输入订单编号" v-model="formData.trackingNumber" style="text-align: right;font-size:28rpx;" placeholder-style="color:#999"/>
          </view>
        </view>
      </template>
      <template v-if="typeOder===3">
        <view class="rail-item item-top-border">
          <text>衣柜类型</text>
          <view class="state-grey flex-aj-center"  @click="showWardrobe = true">
            <input disabled="true" v-model="dictLabel"  placeholder="请选择" style="text-align: right;font-size:28rpx;" placeholder-style="color:#999"/>
            <view class="back">
              <back :isRight="true" :borderColor="'#999'" :padding="'4rpx 0 0'"></back>
            </view>
          </view>
        </view>
      </template>

    </view>
    <view class="card_wrap">
      <view class="order-shop">
        <view class="shop_info df">
          <text class="shop_name" >{{shopInfo.storeShortName}}</text>
          <view class="tag">店铺</view>
        </view>
        <view class="shop_address mgt-20 mgb-20">深圳市民企科技园2栋东座539</view>
        <view class="goods_list">
          <view
            class="goods-item df mgb-15"
            v-for="(item, index) in placeOrderInfo.categories"
            :key="index"
          >
            <image
              class="goods-image"
              :src="item.clothingPicture"
              mode="aspectFill"
            ></image>
            <view class="goods-detail_wrap flex1 mgl-24 mgt-24">
              <view class="goods-detail df flex-jc-sb">
                <view class="goods-name">{{ item.clothingTypeName }}</view>
                <view class="goods-type">¥{{ item.price }}</view>
              </view>
              <view class="goods-price df flex-jc-sb mgt-12">
                <text class="price-symbol">{{item.washingMethod}}</text>
                <text class="price-value">x{{ item.quantity }}</text>
              </view>
            </view>


          </view>
          <!--        订单的详情-->
        </view>
        <view class="price-details">
          <view class="price-item df justify-between">
            <text class="price-label">洗护金额</text>
            <text class="price-value">¥{{placeOrderInfo.totalPrice}}</text>
          </view>
          <view class="price-item cursor-pointer df justify-between flex-ac ">
            <text class="price-label">洗护保价</text>
            <view class="price-value-container df flex-ac" @click="showInsured =true">
              <text class="price-status" v-if="formData.insuranceFee<=0">可选择</text>
              <text class="price-status color_red" v-else>+￥{{formData.insuranceFee}}</text>
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <view class="price-item cursor-pointer df justify-between  flex-ac">
            <text class="price-label">洗护加急</text>
            <view class="price-value-container df flex-ac">
              <up-checkbox
                name="agree"
                usedAlone
                v-model:checked="formData.urgentStatus"
              >
              </up-checkbox>
            </view>
          </view>
          <view class="price-item cursor-pointer df justify-between" @click="isCoupon = true">
            <text class="price-label">店铺优惠券</text>
            <view class="price-value-container">
              <template v-if="formData.couponDiscountRate ||formData.couponDeduction">
                <text class="price-status color_red" v-if="formData.couponDeduction">-￥{{formData.couponDeduction}}</text>
                <text class="price-status color_red" v-else>{{formData.couponDiscountRate}}折</text>
              </template>

              <text class="price-status" v-else>{{couponList.length}}张可用</text>
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
          <view class="price-item cursor-pointer df justify-between" @click="isPlatformCoupon = true">
            <text class="price-label">平台红包</text>
            <view class="price-value-container">
              <template v-if="formData.platformDiscount || formData.platformDiscountRate">
                <text class="price-status color_red"  v-if="formData.platformDiscount">-￥{{formData.platformDiscount}}</text>
                <text class="price-status color_red"  v-else>{{formData.platformDiscountRate}}折</text>
              </template>

              <text class="price-status" v-else>{{platformCouponList.length}}张可用</text>
              <uni-icons type="right" size="16" color="#999"></uni-icons>
            </view>
          </view>
        </view>
        <view class="total_wrap df flex-jc-sb ">
          <view class="total_text">总计</view>
          <view class="total_number">
            <text>¥</text>
            <text>{{totalPrice}}</text>
          </view>
        </view>
        </view>
    </view>
    <!-- 特殊说明 -->
    <special-explain @change="changeSpecialExplain"></special-explain>
    <view style="height: 300rpx"></view>
    <view class="order-summary">
      <view class="mid flex-center-between">
        <view class="flex-a-center">
          待支付<text>￥{{totalPrice}}</text><view class="line"></view>
<!--          <view class="flex-aj-center" @tap="isDetail=!isDetail">-->
<!--            明细<view class="triangle"></view>-->
<!--          </view>-->
        </view>
        <view class="order-summary-btn">
          <main-button :width="'168rpx'" :height="'70rpx'" :isGradient="false" :margin="'0'" :color="'#0080FF'" :borderColor="'#0080FF'" @click="orderConfirm">下单</main-button>
        </view>
      </view>
      <view class="bottom flex-a-center">
        <view @tap="radioActive = !radioActive">
          <single-select :selectShow="radioActive" :scale="'scale(0.66)'" :borderColor="'#999'"></single-select>
        </view>
        阅读并同意
        <view @click="goPingTai">
          《平台洗涤条款》
        </view>
        <view @click="goToStore">
          《店铺洗护风险须知》
        </view>
      </view>
    </view>
<!--    衣柜类型弹窗-->
    <WardrobePopup  v-model="showWardrobe" @select="selectWardrobe"></WardrobePopup>
<!--    上门弹窗-->
    <OpenDoor v-model="showDoor"
    @selectTime="selectTime"
    :startTime="shopInfo.onlineStartTime"
    :endTime="shopInfo.onlineEndTime"
    ></OpenDoor>
<!--    洗护保价弹窗-->
    <InsuredPrice  v-model="showInsured" @select="selectInsured"></InsuredPrice>
    <!-- 优惠券蒙版层 -->
    <ShopCoupon v-model="isCoupon" :userCoupon="true" :couponList="couponList" @getCoupon="handleGetCoupon"></ShopCoupon>
<!--    平台优惠卷-->
     <PlatformCoupon v-model="isPlatformCoupon" :userCoupon="true" :couponList="platformCouponList" @getCoupon="handleGetPlatformCoupon"></PlatformCoupon>
<!--    物流店铺弹窗-->
    <up-picker keyName="dictLabel" :show="logisticsShow" :columns="logisticsColumns" :closeOnClickOverlay="true" @close="close" @cancel="close" @confirm="confirmLogistics"></up-picker>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import {ref,reactive,watch,toRefs,getCurrentInstance} from 'vue'
import {useCustomStores} from '@/utils/hook'
import {getKeyByValue} from '@/utils/dict'
import {expandItems} from "@/utils/common"
import specialExplain from './components/special-explain';
import OpenDoor from '@/pages/cleaningOrder/components/open-door.vue'
import InsuredPrice from '@/pages/cleaningOrder/components/insured-price.vue'
import ShopCoupon from '@/components/shop-couponUse/shop-couponUse.vue'
import PlatformCoupon from '@/components/platform-coupon/platform-coupon.vue'
import WardrobePopup from '@/pages/cleaningOrder/components/wardrobe-popup.vue'
import {customerOrderAction, dictDataList,customerCalculate,agreementGetAgreementTitle, protocolDetail} from '@/api/cleaningOrder'
import {
  couponListByStoreId,
} from '@/api/pagesShop'
import {commonStore} from '../../stores/common'
const CommonStore = commonStore()
const {ShopStore} = useCustomStores()
const radioActive = ref(false)
const typeOder = ref(1)
const dictLabel = ref(null)
const showDoor = ref(false) //上门弹窗
const showWardrobe = ref(false)
const showInsured = ref(false)
const isCoupon = ref(false)
const isPlatformCoupon = ref(false)
const {shopInfo,placeOrderInfo} = ShopStore
const deviceCode= ref(null) //存在就是衣柜
const totalPrice =ref(placeOrderInfo.totalPrice)
const formData = reactive({
  "washType": "STORE_WASH",
  serviceTime:"",
  userAddress:"",
  userName:"",
  userPhone:"",
  protectStatus:0, //保价状态
  insuranceFee:0,//保价费用
  storeId:placeOrderInfo.storeId,
  totalAmount:placeOrderInfo.totalPrice,
  urgentStatus:false, //加急
  couponDeduction:0,//优惠券抵扣金额
  couponDiscountRate:'',//优惠卷折扣
  platformDiscount:0,//平台红包抵扣金额
  platformDiscountRate:'',//平台折扣
  specialNote:"",
  imageUrls:[],
  wardrobeType:"",//衣柜类型
  orderActionItemDtoList:placeOrderInfo.categories.map(item=>{
    return {
      id:item.id,
      clothingBigType:item.clothingBigType,
      clothingType:item.clothingTypeName,
      clothingTypeImages:item.clothingPicture,
      "washType": "STORE_WASH",
      price:item.price,
      count:item.quantity,
      washingMethod:item.washingMethod,
      isClothingUsed: item.isClothingUsed,
      isShoesUsed: item.isShoesUsed,
      oneClothingUsedNum: item.oneClothingUsedNum,
      oneShoesUsedNum: item.oneShoesUsedNum
    }
  }),
  shippingLogistics:'',//物流公司
  trackingNumber:'',//寄件单号


})
const state = reactive({
  couponList :[],
  platformCouponList:[], //平台的优惠卷处理
  logisticsShow:false,
  hemaStoreCoupon:{},//这个对象是来判断有没有使用优惠卷的
  hemaInsuranceFeeConfig:{},//这个对象是来判断有没有使用保价的
  platformCoupon:{} ,//判断平台优惠卷的

})
const goodsList = ref([
]);
const   logisticsColumns=ref([])
function changeSpecialExplain(e){
  // orderRemark.value = e.txt
  // remarkUrl.value = e.pic
   formData.specialNote = e.txt
    formData.imageUrls = e.pic.split(',')
  console.log(e,'e++++++++++++++' )
}
const handeType =(index)=>{
  typeOder.value = index
}
//选择上门时间
const selectTime =(e)=>{
  console.log('e',e)
  formData.serviceTime=e.date +' '+e.time
}
const selectWardrobe= (e)=>{
  if(e){
    formData.wardrobeType = e.dictType
    dictLabel.value = e.dictLabel
  }else {
    formData.wardrobeType = ''
    dictLabel.value = ''
  }
}
const systemInfo = uni.getSystemInfoSync();
const isIOS = systemInfo.platform === 'ios';
const isAndroid = systemInfo.platform === 'android';
const top = ref(70)
if(isIOS){
  top.value = 92
}
const instance = getCurrentInstance();
/***加载上一部分的Top*****/
const loadTop = ()=>{

  const query = uni.createSelectorQuery().in(instance.proxy);

  query
    .select("#nav")
    .boundingClientRect(function (data) {
      top.value = data.height

    }).exec();
}
//选择上门地址
const goChooseAddress =()=>{
  uni.navigateTo({
    url: '/pagesMy/address?type=1'
  })
}
watch(
  () => ShopStore.addressInfo, // 监听 addressInfo
  (newValue) => {
    formData.userAddress = newValue.recipientAddress
    formData.userName = newValue.recipientName
    formData.userPhone = newValue.recipientPhone
  },
  {
    deep: true // 深度监听，确保 addressInfo 内部属性的变化也能触发
  }
);
onLoad((options)=>{
  //查询物流信息
  if(options.deviceCode){
    deviceCode.value = options.deviceCode
    formData.deviceCode = deviceCode.value
    typeOder.value = 3
  }
  console.log('123123123')
  dictDataList({
    dictType:'shipping_logistics',
  }).then(res=>{
    console.log('res',res)
    logisticsColumns.value[0]= [...res]
    console.log('res',  logisticsColumns.value)
  })
  loadCouponList()
  loadPlatformCouponList()
  loadTop()

})
//店铺优惠卷
const loadCouponList = ()=>{
  couponListByStoreId({
    storeId:placeOrderInfo.storeId,
    pageNum:1,
    pageSize:30
  }).then(res=>{
    //过滤一下不可以用的优惠卷 minOrderAmount
    res = res.filter(item=>{
       return item.minOrderAmount<=placeOrderInfo.totalPrice
    })
    couponList.value = res.map(item=>{
      item.flag = false
      return item
    })
    console.log(res,'res')
  })
}
//平台优惠卷处理
const  loadPlatformCouponList =()=>{
  couponListByStoreId({
    storeId:'000000',
    pageNum:1,
    pageSize:30
  }).then(res=>{
    res = res.filter(item=>{
      return item.minOrderAmount<=placeOrderInfo.totalPrice
    })
    platformCouponList.value = res.map(item=>{
      item.flag = false
      return item
    })
  })
}


//选优惠卷处理
function handleGetCoupon(item){
  console.log('item',item)
  // console.log('index',index)
  let index = item.index
  couponList.value = couponList.value.map((item,s)=>{
    if(s===index){
      couponList.value[index].flag = !item.flag
    }else {
      item.flag = false
    }
    return item
  })
  console.log('list', couponList.value )
  //是否选中的钱
  let list = couponList.value.filter(item=>item.flag)

  if(list.length>0){
    let cardInfo =list[0]
    state.hemaStoreCoupon ={
      couponId:cardInfo.couponId,
      storeId:cardInfo.storeId,
      couponType:cardInfo.couponType
    }
    if( cardInfo.couponType ==='COUPON'){
      formData.couponDiscountRate = cardInfo.discountRate
      formData.couponDeduction = 0
      state.hemaStoreCoupon.discountRate = cardInfo.discountRate
    }else {
      formData.couponDeduction =  cardInfo.discountAmount
      formData.couponDiscountRate=''
      state.hemaStoreCoupon.discountAmount = cardInfo.discountAmount
    }

    getCustomerCalculate()
  }else {
    formData.couponDeduction = 0
    state.hemaStoreCoupon = {}
    getCustomerCalculate()
    // totalPrice.value =  placeOrderInfo.totalPrice
  }
}
//处理平台优惠卷
function handleGetPlatformCoupon(item){
  let index = item.index
  // platformCouponList.value[index].flag = !item.item.flag
  platformCouponList.value = platformCouponList.value.map((item,s)=>{
    if(s===index){
      platformCouponList.value[index].flag = !item.flag
    }else {
      item.flag = false
    }
    return item
  })
  //是否选中的钱
  let list = platformCouponList.value.filter(item=>item.flag)
  console.log('list',list)
  if(list.length>0){
    //存在折扣卷的情况
    let cardInfo =list[0]
    state.platformCoupon = {
      platformCouponId:cardInfo.couponId,
      storeId:cardInfo.storeId,
      couponType:cardInfo.couponType
    }
    if( cardInfo.couponType ==='COUPON'){
      formData.platformDiscountRate  = cardInfo.discountRate
      formData.platformDiscount = 0
      state.platformCoupon.discountRate = cardInfo.discountRate

    }else {
      formData.platformDiscount =  cardInfo.discountAmount
      formData.platformDiscountRate =''
      state.platformCoupon.discountAmount =cardInfo.discountAmount
    }


    // totalPrice.value =  placeOrderInfo.totalPrice - list[0].discountAmount
    getCustomerCalculate()
  }else {
    formData.platformDiscount = 0
    state.platformCoupon = {}
    getCustomerCalculate()
    // totalPrice.value =  placeOrderInfo.totalPrice
  }
}
//处理保价
function selectInsured(item){
  console.log('item',item)
  if(item){
    formData.protectStatus = 1
    formData.insuranceFee = item.fee
    state.hemaInsuranceFeeConfig ={
      id:item.id,
      storeId:item.storeId,
      fee:item.fee
    }
    getCustomerCalculate()

  }else {
    formData.protectStatus = 0
    formData.insuranceFee = 0
    getCustomerCalculate()
  }
}
//计算金额的价格
function getCustomerCalculate(){
  let data={}
  if(  formData.couponDeduction>0 ||formData.couponDiscountRate){
    data.hemaStoreCoupon =  state.hemaStoreCoupon
  }
  if(formData.insuranceFee>0){
    data.hemaInsuranceFeeConfig =  state.hemaInsuranceFeeConfig
  }
  if(formData.platformDiscount>0 || formData.platformDiscountRate ){
    data.platformCoupon =  state.platformCoupon
  }
  customerCalculate({
    userName: formData.userName,
    userPhone: formData.userPhone,
    orderActionItemDtoList: expandItems(formData.orderActionItemDtoList),
    ...data
  }).then(res=>{
    totalPrice.value =  res
  })
}
const orderTypeList= [
  {
    name:"DOOR_SERVICE",
    label:"预约上门"
  },
  {
    name:"LOGISTICS_PICKUP",
    label:"物流到店"
  },
  {
    name:"WARDROBE_DELIVERY",
    label:'衣柜到店'
  }
]
//确认订单流程
const orderConfirm =()=>{
  if(!radioActive.value){
    uni.showToast({
      title:"请勾选协议",
      icon:'none'
    })
    return
  }
  if( typeOder.value !==3){
    if(!formData.userAddress){
      uni.showToast({
        title:"请选择地址",
        icon:'none'
      })
      return
    }
  }
  let data={}
  if(  formData.couponDeduction>0 ||formData.couponDiscountRate){
    data.hemaStoreCoupon =  state.hemaStoreCoupon
  }
  if(formData.insuranceFee>0){
    data.hemaInsuranceFeeConfig =  state.hemaInsuranceFeeConfig
  }
  if(formData.platformDiscount>0 || formData.platformDiscountRate ){
    data.platformCoupon =  state.platformCoupon
  }
  customerOrderAction({
    deliveryType:orderTypeList[typeOder.value-1].name,
    deliveryAddress:ShopStore.addressInfo.recipientAddress ||'',
    ...formData,
    ...data, //优惠券使用
      orderActionItemDtoList: expandItems(formData.orderActionItemDtoList),
    totalAmount:totalPrice.value,
    urgentStatus:formData.urgentStatus?1:0,
  }).then(res=>{
    ShopStore.setPlaceOrderInfo({
      orderNo:res
    })
    console.log('res',res)
    uni.navigateTo({
      url:'/pagesMy/user/pay?type='+'shopOrder'+'&totalPrice='+totalPrice.value
    })
  })
}
function close(){
  logisticsShow.value = false
}
function confirmLogistics(e){
 console.log('e',e)
  formData.shippingLogistics = e.value[0].dictLabel
  logisticsShow.value = false
}
//平台
function goPingTai(){
  agreementGetAgreementTitle().then(res=>{
    CommonStore.setRichText({
      ...res,
      title:res.agreementTitle,
      content:res.agreementContent
    })
    uni.navigateTo({
      url: '/pagesInfo/web/commonAgreement'
    })
  })
}
function  goToStore(){
  protocolDetail(placeOrderInfo.storeId).then(res=>{
    CommonStore.setRichText({
      ...res,
      title:res.protocolName,
      content:res.protocolContent
    })
    uni.navigateTo({
      url: '/pagesInfo/web/commonAgreement'
    })
  })
}
const {couponList,logisticsShow,platformCouponList}=toRefs(state)
</script>

<style lang="scss" scoped>
@import "./style/common.scss";
.order_confirmation{
  /* 顶部导航 */
  .tab-container {
    //position: fixed;
    //top:0;
    //left: 0;
    display: flex;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
  }

  .tab-item {
    flex: 1;
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    .line_active{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 100rpx;
      height: 4rpx;
      border-radius: 1rpx ;
      background-color: #000000;
    }
  }

  .tab-item.active {
    color: #333;
    font-weight: 500;
    //border-bottom: 3rpx solid #333;
  }
  .custom{
    margin: 32rpx 32rpx 0;
    padding: 0 0 32rpx;
    .line-pic{
      height: 48rpx;
      border-left: 1rpx solid #999;
      image{
        width: 30rpx;
        height: 28rpx;
        margin-left: 28rpx;
      }
    }
  }
  .card_wrap{
    box-sizing: border-box;
    width: 100%;
    padding: 0 24rpx;
    .order-shop{
      width: 100%;
      box-sizing: border-box;
      padding: 0 24rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      .shop_info{
        padding-top: 20rpx;
        width: 100%;
        .shop_name{
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }
        .tag{
          margin-left: 10rpx;
          padding: 5rpx 8rpx;
          background: #0080FF;
          border-radius: 6rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
      .shop_address{
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }
      .goods_list{
        border-top: 1rpx solid #E5E5E5;
        //border-bottom: 1rpx solid #E5E5E5;
        padding-top: 20rpx;
        width: 100%;
        .goods-item{
          .goods-image{
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx;
            //background-color: #f5f5f5;
            flex-shrink: 0;
          }
          .goods-detail{
            .goods-name{
              font-size: 32rpx;
              color: #333333;
            }
            .goods-type{
              font-size: 32rpx;
              color: #333333;
            }
          }
          .goods-price{
            .price-symbol{
              font-size: 32rpx;
              color: #999999;
            }
            .price-value{
              font-size: 32rpx;
              color: #999999;
            }
          }
        }
        .goods_bottom{
          margin-bottom: 20rpx;
          .goods_lab_wrap{

          }
          .goods_bottom_right{
            font-size: 32rpx;
            color: #333333;
            .total-price{
              font-size: 32rpx;
              color: #ff3333;
            }
          }
        }

      }
      .goods_btn_wrap{
        width: 100%;
        padding: 30rpx 0;
      }
      .price-details{
        margin-top: 20rpx;
        border-bottom: 1rpx solid #E5E5E5;
        width: 100%;
        .price-item{
          margin-bottom: 20rpx;
          .price-label{
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
          .price-value-container{
            font-size: 28rpx;
            color: #999999;
            .price-discount{
              color: #D22C14;
            }
          }
        }

      }
      .total_wrap{
        padding: 24rpx 0;
        .total_text{
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }
        .total_number{
          font-weight: bold;
          font-size: 28rpx;
          color: #D22C14;
        }
      }
    }

  }
}
.color_red{
  color:#df273e ;
 }
</style>
